<template>
  <!-- 底部模板展示 -->
  <scroll-view class="menu-content" scroll-y="true" :show-scrollbar="false">
    <view class="menu-list">
      <view
        class="menu-item"
        v-for="item in myComponentsNames.hstab"
        :key="item"
      >
        <!-- 动态组件 -->
        <component :is="item"></component>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import { myComponentsNames } from "@/components/globalComponents";
export default defineComponent({
  name: "",
  props: {},
  components: {},
  setup(props, context) {
    const data = reactive({
      myComponentsNames,
    });

    return {
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.menu-content {
  height: calc(100% - 80rpx);
  // 渐变
  background: linear-gradient(to bottom, #fff, #ddd);
  .menu-list {
    width: 100%;
    padding: 0 15rpx;
    padding-bottom: 1rpx;
    box-sizing: border-box;
    .menu-item {
      width: 100%;
      margin: 15rpx 0;
    }
  }
}
</style>
